<template>
    <div class="role_update">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem href="">系统配置</BreadcrumbItem>
                <BreadcrumbItem to="/config/role">角色管理</BreadcrumbItem>
                <BreadcrumbItem >{{breadcrumbItemName}}</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div class="layout-content">
            <div class="layout-content-main">
                <Loading :modal="loading"></Loading>
                <Form :model="form" ref="form" :label-width="150" :rules="formRule" >
                    <FormItem prop="name" label="角色英文名">
                        <Input v-model="form.name" placeholder="角色英文名" />
                    </FormItem>
                    <FormItem prop="displayName" label="角色中文名">
                        <Input v-model="form.displayName" placeholder="角色中文名" />
                    </FormItem>
                    <FormItem prop="description" label="描述">
                        <Input v-model="form.description" maxlength="100" show-word-limit  type="textarea" :autosize="{minRows: 5,maxRows: 10}" size="large" placeholder="角色描述" />
                    </FormItem>
                    <FormItem prop="permission_id" label="权限列表">
                        <Card>
                            <p slot="title">根据需求选择用户权限</p>
                            <Tree ref="permissions"  :data="permissions" show-checkbox check-directly multiple empty-text="" ></Tree>
                        </Card>
                    </FormItem>
                    <FormItem label="">
                        <Button type="primary" @click="submit('form')" :loading="btn.loading">提交</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
import {Breadcrumb,Form,Input,Button,Card,Alert,Tree} from 'view-design';

import Loading  from 'admin/components/common/loading'

export default{
    components:{
        Breadcrumb,
        "BreadcrumbItem" : Breadcrumb.Item,
        Input,
        Form,
        'FormItem' : Form.Item,
        Button,
        Loading,
        Card,
        Alert,
        Tree,
    },
    data () {
        const validateName=(rule , value ,callback)=>{
            var reg = /^[A-Z0-9a-z_]+$/;
            if(!reg.test(value)){
                callback(new Error('只能填写英文、_'));
            }
            this.Axios.Config.Role.CheckName({name:value,id:this.form.id})
            .then(res =>{
                if(!res){
                    callback(new Error('角色英文名已存在'));
                    return false;
                }
                callback();
            })
        };
        const validateDisplayName=(rule , value ,callback)=>{
            var reg = /^[\u4E00-\u9FA5-]+$/;
            if(!reg.test(value)){
                callback(new Error('只能填写中文名'));
            }
            callback();
        };
        return {
            form :{
                id : 0,
                name : '',
                displayName  : '',
                description  : '',
                permission_id : [],
            },
            permissions: [],
            loading: true,
            formRule: {
                name: [
                    { required: true, message: '请填写角色英文名', trigger: 'blur' },
                    { validator: validateName, trigger: 'blur'}
                ],
                displayName: [
                    { required: true, message: '请填写角色中文名', trigger: 'blur' },
                    { validator: validateDisplayName, trigger: 'blur'}
                ],
                permission_id: [
                    { required: true, message: '请至少选择一个权限'},
                ],
            },
            breadcrumbItemName:'',
            btn:{
                loading:false,
            },
        }
    },
    methods: {
        submit(name){
            this.btn.loading = true;

            this.form.permission_id = [];
            var permissions = this.$refs.permissions.getCheckedAndIndeterminateNodes();
            for(var i in permissions){
                permissions[i]['children'] = '';
            }
            this.form.permission_id = permissions;

            this.$refs[name].validate((valid) => {
                if (!valid) {
                    this.btn.loading = false;
                    return false;
                }
                if (this.$route.params.id==undefined) {
                    this.Axios.Config.Role.Insert(this.form)
                    .then(res =>{
                        if(!res){
                            this.btn.loading = false;
                            return false;
                        }
                        this.$router.go(-1);
                    })
                }else{
                    this.Axios.Config.Role.Update(this.form)
                    .then(res =>{
                        if(!res){
                            this.btn.loading = false;
                            return false;
                        }
                        this.$router.go(-1);
                    })
                }
                
            })
        },
        //获取角色权限列表
        getPermission(params){
            this.Axios.Config.Role.TreePermission(params)
            .then(res =>{
                if(!res) return false;
                this.permissions = res.data;
                this.loading = false;
            })
        }
    },
    created: function() {
        //面包屑导航路径赋值、获取角色信息
        if(this.$route.params.id===undefined){
            this.getPermission({});
            this.breadcrumbItemName = '角色新增';
            return false;
        }
        this.breadcrumbItemName = '角色更新';
        var id = this.$route.params.id;
        this.Axios.Config.Role.Get(id)
        .then(res =>{
            if(!res) return false;
            var data = res.data;
            this.form.id = data.id;
            this.form.name = data.name;
            this.form.displayName = data.displayName;
            this.form.description = data.description;
            this.getPermission({id:this.form.id});
        })
    },
    watch:{
        
    }
}
</script>
<style>
    .role_update .ivu-checkbox-group-item{width: 100%;}
</style>